<template>
	<view class="content">
		<!-- 扫码结果显示区域 - 顶部 -->
		<view class="result-section">
			<text class="section-title">扫码结果</text>
			<view class="result-area" v-if="scanResult">
				<view class="result-row">
					<text class="result-label">内容：</text>
					<text class="result-value">{{scanResult}}</text>
				</view>
				<view class="result-row" v-if="scanType">
					<text class="result-label">类型：</text>
					<text class="result-value">{{scanType}}</text>
				</view>
				<view class="result-row" v-if="charSet">
					<text class="result-label">字符集：</text>
					<text class="result-value">{{charSet}}</text>
				</view>
				<view class="result-row" v-if="imageChannel">
					<text class="result-label">来源：</text>
					<text class="result-value">{{imageChannel}}</text>
				</view>
				<view class="result-row" v-if="rawData">
					<text class="result-label">原始数据：</text>
					<text class="result-value">{{rawData.substring(0, 80)}}{{rawData.length > 80 ? '...' : ''}}</text>
				</view>
			</view>
			<view class="no-result" v-else>
				<text class="no-result-text">暂无扫码结果</text>
			</view>
		</view>

		<!-- 扫码按钮区域 - 中间 -->
		<view class="scan-button-section">
			<button class="scan-main-btn" @click="startScanWithConfig" :disabled="isScanning">
				<text class="scan-btn-text">{{isScanning ? '扫码中...' : '开始扫码'}}</text>
			</button>
			<view class="default-config-hint">
				<text class="hint-text">使用默认配置：仅支持二维码，相机+相册</text>
			</view>
		</view>

		<!-- 配置选项区域 - 底部（折叠式） -->
		<view class="config-section">
			<view class="config-header" @click="toggleConfig">
				<text class="config-title">高级配置</text>
				<text class="config-toggle">{{showConfig ? '收起' : '展开'}}</text>
			</view>
			
			<view class="config-content" v-if="showConfig">
				<!-- 快速配置 -->
				<view class="quick-config-section">
					<text class="quick-title">快速配置</text>
					<view class="quick-config-grid">
						<button class="quick-config-btn" @click="setQuickConfig('qr')">
							<text class="quick-btn-title">二维码</text>
						</button>
						<button class="quick-config-btn" @click="setQuickConfig('camera')">
							<text class="quick-btn-title">仅相机</text>
						</button>
					</view>
				</view>
				
				<!-- 详细配置 -->
				<view class="detail-config-section">
					<text class="detail-title">详细配置</text>
					
					<view class="config-row">
						<text class="config-name">仅相机</text>
						<switch :checked="config.onlyFromCamera" @change="onConfigChange" data-key="onlyFromCamera" />
					</view>
					
					<view class="config-row">
						<text class="config-name">扫描框颜色</text>
						<view class="color-selector">
							<view 
								class="color-option" 
								v-for="color in scanFrameColors" 
								:key="color.value"
								:style="{ backgroundColor: color.value }"
								:class="{ active: config.scanFrameColor === color.value }"
								@click="setScanFrameColor(color.value)"
							>
								<view class="color-check" v-if="config.scanFrameColor === color.value">✓</view>
							</view>
						</view>
					</view>
					
					<view class="scan-type-section">
						<text class="type-title">扫码类型</text>
						<view class="type-checkboxes">
							<view class="type-checkbox" v-for="type in scanTypes" :key="type.value">
								<checkbox 
									:checked="config.scanType.includes(type.value)" 
									@change="onScanTypeChange" 
									:data-value="type.value"
								/>
								<text class="type-name">{{type.label}}</text>
							</view>
						</view>
						<text class="type-hint">仅支持二维码识别</text>
					</view>
				</view>
				
				<view class="config-actions">
					<button class="reset-btn" @click="resetConfig">重置配置</button>
					<button class="clear-result-btn" @click="clearResult" v-if="scanResult">清空结果</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import jzH5ScanCode from '@/uni_modules/jz-h5-scanCode/js/index.js'
	
	export default {
		data() {
			return {
				scanResult: '',
				scanType: '',
				charSet: '',
				imageChannel: '',
				rawData: '',
				isScanning: false,
				showConfig: true, // 控制配置区域显示/隐藏
				
				// 默认扫码配置（仅二维码）
				defaultConfig: {
					onlyFromCamera: false,
					autoDecodeCharset: false,
					barCodeInput: false,
					scanType: ['qrCode'], // 仅支持二维码
					scanFrameColor: '#00ff00' // 默认绿色
				},
				
				// 当前扫码配置（仅二维码）
				config: {
					onlyFromCamera: false,
					autoDecodeCharset: false,
					barCodeInput: false,
					scanType: ['qrCode'], // 仅支持二维码
					scanFrameColor: '#00ff00' // 默认绿色
				},
				
				// 扫码类型选项（仅保留二维码）
				scanTypes: [
					{ value: 'qrCode', label: '二维码' }
				],
				
				// 扫描框颜色选项
				scanFrameColors: [
					{ value: '#00ff00', label: '绿色' },
					{ value: '#007aff', label: '蓝色' },
					{ value: '#ff3b30', label: '红色' },
					{ value: '#ff9500', label: '橙色' },
					{ value: '#ffcc00', label: '黄色' },
					{ value: '#34c759', label: '青绿色' },
					{ value: '#af52de', label: '紫色' },
					{ value: '#ffffff', label: '白色' }
				]
			}
		},
		onLoad() {
			// 插件已通过 import 静态导入
			console.log('插件加载成功');
			
			// 获取插件信息
			const pluginInfo = jzH5ScanCode.getPluginInfo();
			console.log('插件信息:', pluginInfo);
		},
		methods: {
			/**
			 * 切换配置区域显示/隐藏
			 */
			toggleConfig() {
				this.showConfig = !this.showConfig;
			},
			
			/**
			 * 配置项变更
			 */
			onConfigChange(e) {
				const key = e.target.dataset.key;
				const value = e.detail.value;
				this.config[key] = value;
				console.log(`配置更新: ${key} = ${value}`);
			},
			
			/**
			 * 扫码类型变更
			 */
			onScanTypeChange(e) {
				const value = e.target.dataset.value;
				const checked = e.detail.value;
				
				if (checked) {
					if (!this.config.scanType.includes(value)) {
						this.config.scanType.push(value);
					}
				} else {
					const index = this.config.scanType.indexOf(value);
					if (index > -1) {
						this.config.scanType.splice(index, 1);
					}
				}
				console.log('扫码类型更新:', this.config.scanType);
			},
			
			/**
			 * 快速配置设置（仅二维码相关）
			 */
			setQuickConfig(type) {
				switch (type) {
					case 'all':
					case 'qr':
						this.config.scanType = ['qrCode'];
						this.config.onlyFromCamera = false;
						break;
					case 'camera':
						this.config.scanType = ['qrCode'];
						this.config.onlyFromCamera = true;
						break;
				}
				
				uni.showToast({
					title: '配置已更新',
					icon: 'success',
					duration: 1000
				});
			},
			
			/**
			 * 设置扫描框颜色
			 */
			setScanFrameColor(color) {
				this.config.scanFrameColor = color;
				console.log('扫描框颜色更新:', color);
			},
			
			/**
			 * 重置配置为默认值
			 */
			resetConfig() {
				this.config = { ...this.defaultConfig };
				uni.showToast({
					title: '配置已重置',
					icon: 'success',
					duration: 1000
				});
			},
			
			/**
			 * 使用当前配置扫码
			 */
			startScanWithConfig() {
				try {
					this.isScanning = true;
					
					// 构建扫码参数
					const scanParams = this.buildScanParams();
					console.log('扫码参数:', scanParams);
					
					// 调用扫码API
					jzH5ScanCode.scanCode(scanParams);
				} catch (error) {
					this.isScanning = false;
					console.error('启动扫码失败:', error);
					uni.showToast({
						title: '启动扫码失败',
						icon: 'none'
					});
				}
			},
			
			/**
			 * 构建扫码参数
			 */
			buildScanParams() {
				const params = {
					success: (res) => {
						console.log('扫码成功:', res);
						this.handleScanSuccess(res);
					},
					fail: (res) => {
						console.error('扫码失败:', res);
						this.handleScanFail(res);
					},
					complete: (res) => {
						console.log('扫码完成:', res);
						this.isScanning = false;
					}
				};
				
				// 添加配置参数
				if (this.config.onlyFromCamera) {
					params.onlyFromCamera = true;
				}
				
				if (this.config.autoDecodeCharset) {
					params.autoDecodeCharset = true;
				}
				
				if (this.config.barCodeInput) {
					params.barCodeInput = true;
				}
				
				if (this.config.scanType.length > 0) {
					params.scanType = [...this.config.scanType];
				}
				
				if (this.config.scanFrameColor) {
					params.scanFrameColor = this.config.scanFrameColor;
				}
				
				return params;
			},
			
			/**
			 * 处理扫码成功
			 */
			handleScanSuccess(res) {
				this.scanResult = res.result || '';
				this.scanType = res.scanType || '';
				this.charSet = res.charSet || '';
				this.imageChannel = res.imageChannel || '';
				this.rawData = res.rawData || '';
				
				uni.showToast({
					title: '扫码成功',
					icon: 'success'
				});
				
				// 震动反馈
				if (uni.vibrateShort) {
					uni.vibrateShort();
				}
			},
			
			/**
			 * 处理扫码失败
			 */
			handleScanFail(res) {
				const errorMsg = res.errMsg || '未知错误';
				uni.showToast({
					title: '扫码失败: ' + errorMsg,
					icon: 'none',
					duration: 3000
				});
			},
			
			/**
			 * 清空结果
			 */
			clearResult() {
				this.scanResult = '';
				this.scanType = '';
				this.charSet = '';
				this.imageChannel = '';
				this.rawData = '';
				
				uni.showToast({
					title: '结果已清空',
					icon: 'success',
					duration: 1000
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f7fa;
		padding: 20rpx;
		gap: 20rpx;
	}

	/* 结果区域样式 - 顶部 */
	.result-section {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
	}
	
	.section-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 20rpx;
		text-align: center;
	}
	
	.result-area {
		background-color: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx;
		border: 2rpx solid #e9ecef;
	}
	
	.result-row {
		display: flex;
		margin-bottom: 12rpx;
		align-items: flex-start;
	}
	
	.result-row:last-child {
		margin-bottom: 0;
	}
	
	.result-label {
		font-size: 24rpx;
		color: #666;
		width: 120rpx;
		flex-shrink: 0;
	}
	
	.result-value {
		font-size: 24rpx;
		color: #333;
		flex: 1;
		word-break: break-all;
		line-height: 1.4;
	}
	
	.no-result {
		text-align: center;
		padding: 40rpx 20rpx;
	}
	
	.no-result-text {
		font-size: 24rpx;
		color: #999;
	}

	/* 扫码按钮区域 - 中间 */
	.scan-button-section {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.scan-main-btn {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
		border-radius: 50rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 25rpx rgba(0, 122, 255, 0.3);
		margin-bottom: 15rpx;
	}
	
	.scan-main-btn:disabled {
		background: #c0c0c0;
		box-shadow: none;
	}
	
	.scan-main-btn:not(:disabled):active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.4);
	}
	
	.scan-btn-text {
		font-size: 32rpx;
		color: white;
		font-weight: bold;
	}
	
	.default-config-hint {
		text-align: center;
	}
	
	.hint-text {
		font-size: 22rpx;
		color: #999;
	}

	/* 配置区域样式 - 底部 */
	.config-section {
		background-color: white;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
	}
	
	.config-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.config-title {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
	}
	
	.config-toggle {
		font-size: 24rpx;
		color: #007aff;
	}
	
	.config-content {
		padding: 25rpx 30rpx;
	}
	
	/* 快速配置 */
	.quick-config-section {
		margin-bottom: 25rpx;
	}
	
	.quick-title {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 15rpx;
	}
	
	.quick-config-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10rpx;
	}
	
	.quick-config-btn {
		background-color: #f8f9fa;
		border: 1rpx solid #e9ecef;
		border-radius: 8rpx;
		padding: 15rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 60rpx;
	}
	
	.quick-config-btn:active {
		background-color: #e9ecef;
		transform: scale(0.98);
	}
	
	.quick-btn-title {
		font-size: 22rpx;
		color: #333;
	}
	
	/* 详细配置 */
	.detail-config-section {
		margin-bottom: 25rpx;
	}
	
	.detail-title {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 15rpx;
	}
	
	.config-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.config-row:last-child {
		border-bottom: none;
	}
	
	.config-name {
		font-size: 24rpx;
		color: #333;
	}
	
	/* 颜色选择器样式 */
	.color-selector {
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
	}
	
	.color-option {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		border: 2rpx solid #e9ecef;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s;
		position: relative;
	}
	
	.color-option.active {
		border-color: #007aff;
		border-width: 3rpx;
		transform: scale(1.1);
	}
	
	.color-check {
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	}
	
	.color-option:active {
		transform: scale(0.95);
	}
	
	.scan-type-section {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}
	
	.type-title {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 15rpx;
	}
	
	.type-checkboxes {
		display: flex;
		justify-content: center;
		gap: 10rpx;
		margin-bottom: 10rpx;
	}
	
	.type-checkbox {
		display: flex;
		align-items: center;
		padding: 8rpx 0;
	}
	
	.type-name {
		font-size: 22rpx;
		color: #333;
		margin-left: 10rpx;
	}
	
	.type-hint {
		font-size: 20rpx;
		color: #999;
		text-align: center;
	}
	
	/* 配置操作按钮 */
	.config-actions {
		display: flex;
		gap: 15rpx;
	}
	
	.reset-btn, .clear-result-btn {
		flex: 1;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1rpx solid #e9ecef;
		background-color: #f8f9fa;
		font-size: 24rpx;
		color: #666;
	}
	
	.reset-btn:active, .clear-result-btn:active {
		background-color: #e9ecef;
		transform: scale(0.98);
	}
</style>
